import React from "react";

const YSJFNav = (props: { isTrue: boolean }) => {
  const {isTrue} = props;
  const hoverClassName1 = 'w-[70px] mr-[60px] cursor-pointer hover:scale-110 transition hover:tracking-[2px]'
  const hoverClassName2 = 'w-[70px] mr-[60px] cursor-pointer hover:scale-110 transition hover:tracking-[2px] hover:text-black'

  return (
    /* lg:flex hidden 的意思 ===>  屏幕尺寸 >= lg尺寸下显示，屏幕< lg 隐藏
        tailwind CSS 规则
        非响应式类（如 hidden, flex）在所有屏幕尺寸下生效。
        响应式类（如 lg:flex, md:hidden）只在指定尺寸及以上生效。
        优先级规则：当非响应式类与响应式类冲突时，响应式类会在其生效的屏幕尺寸范围内覆盖非响应式类
       */
    <ul className="lg:flex hidden  items-center  text-[12px] transition text-[#c9c9c9]">
      <li
        className={isTrue ? hoverClassName1 : hoverClassName2}>影视飓风
      </li>
      <li
        className={isTrue ? hoverClassName1 : hoverClassName2}>飓风素材库
      </li>
      <li
        className={isTrue ? hoverClassName1 : hoverClassName2}>闪电分镜
      </li>
      <li
        className={isTrue ? hoverClassName1 : hoverClassName2}>太空之眼
      </li>
      <li
        className={isTrue ? "w-[70px]  cursor-pointer  hover:scale-110 transition hover:tracking-[2px]" : "w-[70px]  cursor-pointer  hover:scale-110 transition hover:tracking-[2px] hover:text-black"}>加入我们
      </li>
    </ul>
  )
}

export default YSJFNav;